<template>
  <div class=''> 
      <div ref="myChart" :style="{width: '100%', height: '250px'}"></div>  
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    echartsId: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      datalist:[]
     }
  },
  computed: { },
  created () { },
  mounted () { 
    this.init()
  },
  methods:{
      init(){
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(this.$refs.myChart)
        // 绘制图表
        this.data = []
        var dataname = ['中国', '俄罗斯', '美国', '英国', '法国'];
        for (let i = 0; i < dataname.length; ++i) {
            this.data.push({
              value:Math.round(Math.random() * 1000),
              name:dataname[i]
            });
        }
        // 指定图表的配置项和数据
        const option = {
            title: {
              text: '某站点用户访问来源',
              subtext: '纯属虚构',
              left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: this.data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
      }
  }
}
</script>

<style scoped lang='less'></style>

